<template>
  <div class="vhMain">
    <TitleComponent title="岗位信息" />
    <div class="mainInfo">
      <div>
        <!-- 岗位信息 -->
        <div class="title_line">
          <div class="title_img">
            <img src="@/assets//images/post.png" alt="" />
          </div>
          <p class="title">岗位信息</p>
        </div>
        <div>
          <div class="form">
            <el-form
              :model="form"
              label-width="auto"
              label-position="right"
              ref="formRef"
              class="custom-form"
            >
              <el-form-item label="岗位名称:" prop="jobName">
                <el-input
                  placeholder="请输入岗位名称"
                  maxlength="50"
                  v-model="form.jobName"
                />
              </el-form-item>

              <el-form-item label="职级:" prop="positionLevel">
                <el-input
                  placeholder="请输入职级"
                  v-model="form.positionLevel"
                />
              </el-form-item>

              <el-form-item label="薪资范围:" prop="salaryRange">
                <SalaryRange :width="70" v-model="form.salaryRange" />
              </el-form-item>

              <el-form-item label="岗位状态:" prop="jobStatus">
                <el-select
                  disabled
                  v-model="form.jobStatus"
                  placeholder="请选择岗位状态"
                  clearable
                >
                  <el-option
                    v-for="dict in sys_normal_disable"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="签订竞业协议:" prop="isCompetition">
                <el-select
                  v-model="form.isCompetition"
                  clearable
                  disabled
                  placeholder=""
                >
                  <el-option
                    v-for="dict in sys_whether_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="签订保密协议:" prop="isConfidential">
                <el-select
                  v-model="form.isConfidential"
                  clearable
                  disabled
                  placeholder=""
                >
                  <el-option
                    v-for="dict in sys_whether_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="岗位性质:" prop="jobNature">
                <el-select
                  disabled
                  v-model="form.jobNature"
                  placeholder="请选择岗位性质"
                  clearable
                >
                  <el-option
                    v-for="dict in sys_job_nature"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form
              label-width="auto"
              label-position="top"
              ref="formRef"
              class="custom-form"
            >
              <el-form-item label="岗位职责:" prop="jobResponsibilities">
                <el-input
                  placeholder="请输入岗位职责"
                  maxlength="2000"
                  v-model="form.jobResponsibilities"
                  rows="4"
                />
              </el-form-item>
              <el-form-item label="任职条件:" prop="qualification">
                <el-input
                  placeholder="请输入任职条件"
                  maxlength="2000"
                  v-model="form.qualification"
                  rows="4"
                />
              </el-form-item>
              <el-form-item label="岗位关键词:" prop="jobKeywords">
                <el-input
                  placeholder="请输入岗位关键词"
                  maxlength="2000"
                  v-model="form.jobKeywords"
                  rows="4"
                />
              </el-form-item>
              <el-form-item label="岗位信息描述文件:" prop="file">
                <Upload
                  v-model="form.file"
                  :isShowTip="false"
                  :fileType="fileType"
                  :fileSize="50"
                  @update:modelValue="uploadFiles"
                  @delete="handleFileDelete"
                ></Upload>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- <div class="btns"> -->
        <!-- <div class="back-btn"> -->

        <!-- </div> -->
        <!-- </div> -->
      </div>
      <!-- <el-button type="primary" @click="router.go(-1)">返回列表</el-button> -->
    </div>
  </div>
</template>

<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Upload from "@/components/FileUpload/index.vue";
import SalaryRange from "@/components/SalaryRange/index.vue";
import { reactive, onMounted, ref } from "vue";
import { getDetailById } from "@/api/JobInformationApi";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { sys_job_nature } = proxy.useDict("sys_job_nature");
// 子组件引用

// 岗位信息库弹窗
const form = reactive({
  jobName: "",
  positionLevel: "",
  salaryRange: "",
  jobStatus: undefined,
  jobResponsibilities: "",
  qualification: "",
  jobKeywords: "",
  file: "",
  isCompetition: "1",
  isConfidential: "1",
});

const rules = {
  jobName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
  salaryRange: [
    { required: true, message: "请输入薪资范围", trigger: "change" },
  ],
  jobStatus: [{ required: true, message: "请选择岗位状态", trigger: "change" }],
  jobResponsibilities: [
    { required: true, message: "请输入岗位职责", trigger: "blur" },
  ],
  qualification: [
    { required: true, message: "请输入任职条件", trigger: "blur" },
  ],
  jobKeywords: [
    { required: true, message: "请输入岗位关键词", trigger: "blur" },
  ],
};

const formRef = ref(null);

const fileType = ref([
  "doc",
  "xls",
  "ppt",
  "txt",
  "pdf",
  "docx",
  "xlsx",
  "pptx",
]);

onMounted(() => {
  getDetailById({ id: route.query.id }).then((res) => {
    console.log(res, "res");
    if (res.code === 200) {
      Object.assign(form, res.data);
    }
  });
});

// 附件
const uploadFiles = (files) => {
  form.file = files;
};
const handleFileDelete = (updatedFiles) => {
  // userInfoForm.saveTransferFileVos=updatedFiles;
  form.file = updatedFiles;
};
</script>

<style lang="scss" scoped>
.vhMain {
  width: 100%;
  background: #fff;
  overflow: auto;

  border-radius: 10px;

  .mainInfo {
    width: 60%;
    padding: 20px;
  }
}
:deep(.el-select__wrapper) {
  box-shadow: none !important;
  //   background: white !important;
}
:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__selected-item, .el-select__placeholder) {
  color: #333 !important;
}
:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}
</style>
